<template>
  <div class="cashier-analytics-container">
    <!-- 统计卡片区域 -->
    <div class="statistics-cards">
      <el-row :gutter="20">
        <el-col :span="6" v-for="(item, index) in statisticsData" :key="index">
          <el-card class="stat-card" :body-style="{ padding: '20px' }">
            <div class="card-content">
              <div class="stat-value">{{ item.value }}</div>
              <div class="stat-label">{{ item.label }}</div>
              <div class="stat-trend" :class="item.trend">
                {{ item.percentage }}%
                <i :class="item.trend === 'up' ? 'el-icon-top' : 'el-icon-bottom'"></i>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 图表区域 -->
    <div class="charts-section">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-card>
            <template #header>
              <div class="chart-header">
                <span>收费方式分布</span>
                <el-radio-group v-model="timeRange" size="small">
                  <el-radio-button label="day">日</el-radio-button>
                  <el-radio-button label="week">周</el-radio-button>
                  <el-radio-button label="month">月</el-radio-button>
                </el-radio-group>
              </div>
            </template>
            <div class="chart" ref="paymentMethodChart"></div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card>
            <template #header>
              <div class="chart-header">
                <span>收费趋势</span>
                <el-select v-model="trendType" size="small">
                  <el-option label="收费金额" value="amount" />
                  <el-option label="收费笔数" value="count" />
                </el-select>
              </div>
            </template>
            <div class="chart" ref="trendChart"></div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 操作记录表格 -->
    <el-card class="table-card">
      <template #header>
        <div class="table-header">
          <span>收费操作记录</span>
          <div class="header-operations">
            <el-button type="primary" size="small" @click="exportReport">
              导出报表
            </el-button>
            <el-button type="success" size="small" @click="refreshData">
              刷新数据
            </el-button>
          </div>
        </div>
      </template>

      <!-- 搜索栏 -->
      <el-form :inline="true" :model="searchForm" class="search-form">
        <el-form-item label="收费员">
          <el-input v-model="searchForm.cashier" placeholder="收费员姓名" />
        </el-form-item>
        <el-form-item label="车牌号">
          <el-input v-model="searchForm.plateNumber" placeholder="车牌号" />
        </el-form-item>
        <el-form-item label="收费类型">
          <el-select v-model="searchForm.paymentType" placeholder="收费类型">
            <el-option label="现金" value="cash" />
            <el-option label="微信" value="wechat" />
            <el-option label="支付宝" value="alipay" />
          </el-select>
        </el-form-item>
        <el-form-item label="时间范围">
          <el-date-picker
            v-model="searchForm.dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
          <el-button @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>

      <!-- 数据表格 -->
      <el-table :data="tableData" style="width: 100%" border>
        <el-table-column prop="time" label="操作时间" width="180" />
        <el-table-column prop="cashier" label="收费员" width="120" />
        <el-table-column prop="plateNumber" label="车牌号" width="120" />
        <el-table-column prop="amount" label="收费金额" width="120">
          <template #default="scope">
            ¥{{ scope.row.amount.toFixed(2) }}
          </template>
        </el-table-column>
        <el-table-column prop="paymentType" label="收费类型" width="120">
          <template #default="scope">
            <el-tag :type="getPaymentTypeTag(scope.row.paymentType)">
              {{ scope.row.paymentType }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="120">
          <template #default="scope">
            <el-tag :type="getStatusTag(scope.row.status)">
              {{ scope.row.status }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注" />
      </el-table>

      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          :page-size="pageSize"
          :current-page="currentPage"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'CashierAnalytics',
  data() {
    return {
      // 统计数据
      statisticsData: [
        { label: '今日收费总额', value: '¥8,546.00', trend: 'up', percentage: 15 },
        { label: '今日收费笔数', value: '156', trend: 'up', percentage: 8 },
        { label: '异常交易数', value: '3', trend: 'down', percentage: 25 },
        { label: '现金收费比例', value: '35%', trend: 'down', percentage: 12 }
      ],

      // 图表配置
      timeRange: 'day',
      trendType: 'amount',

      // 搜索表单
      searchForm: {
        cashier: '',
        plateNumber: '',
        paymentType: '',
        dateRange: []
      },

      // 表格数据
      tableData: [],
      total: 0,
      pageSize: 10,
      currentPage: 1,

      // 图表实例
      paymentMethodChart: null,
      trendChart: null
    }
  },
  mounted() {
    this.initCharts()
    this.fetchData()
  },
  methods: {
    // 初始化图表
    initCharts() {
      this.$nextTick(() => {
        // 收费方式分布图表
        this.paymentMethodChart = echarts.init(this.$refs.paymentMethodChart)
        this.paymentMethodChart.setOption({
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
          },
          legend: {
            orient: 'vertical',
            left: 'left'
          },
          series: [{
            name: '收费方式',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            data: [
              { value: 435, name: '现金' },
              { value: 679, name: '微信' },
              { value: 548, name: '支付宝' }
            ]
          }]
        })

        // 收费趋势图表
        this.trendChart = echarts.init(this.$refs.trendChart)
        this.trendChart.setOption({
          tooltip: {
            trigger: 'axis'
          },
          xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line',
            smooth: true
          }]
        })
      })
    },

    // 获取数据
    fetchData() {
      // 模拟数据
      this.tableData = [
        {
          time: '2024-03-18 10:23:45',
          cashier: '张三',
          plateNumber: '京A12345',
          amount: 35.00,
          paymentType: '微信',
          status: '正常',
          remark: '正常收费'
        },
        // ... 更多数据
      ]
      this.total = 100
    },

    // 搜索处理
    handleSearch() {
      this.currentPage = 1
      this.fetchData()
    },

    // 重置搜索
    resetSearch() {
      this.searchForm = {
        cashier: '',
        plateNumber: '',
        paymentType: '',
        dateRange: []
      }
      this.handleSearch()
    },

    // 导出报表
    exportReport() {
      this.$message.success('报表导出成功')
    },

    // 刷新数据
    refreshData() {
      this.fetchData()
      this.initCharts()
    },

    // 分页处理
    handleSizeChange(val) {
      this.pageSize = val
      this.fetchData()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.fetchData()
    },

    // 标签样式处理
    getPaymentTypeTag(type) {
      const tags = {
        '现金': '',
        '微信': 'success',
        '支付宝': 'primary'
      }
      return tags[type] || 'info'
    },
    getStatusTag(status) {
      const tags = {
        '正常': 'success',
        '异常': 'danger',
        '退款': 'warning'
      }
      return tags[status] || 'info'
    }
  }
}
</script>

<style lang="scss" scoped>
.cashier-analytics-container {
  padding: 20px;
  background: #f5f7fa;

  .statistics-cards {
    margin-bottom: 20px;

    .stat-card {
      .card-content {
        text-align: center;

        .stat-value {
          font-size: 24px;
          font-weight: bold;
          color: #303133;
        }

        .stat-label {
          font-size: 14px;
          color: #909399;
          margin: 8px 0;
        }

        .stat-trend {
          font-size: 12px;
          &.up { color: #67c23a; }
          &.down { color: #f56c6c; }
        }
      }
    }
  }

  .charts-section {
    margin-bottom: 20px;

    .chart {
      height: 300px;
    }

    .chart-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }

  .table-card {
    .table-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .search-form {
      margin-bottom: 20px;
    }

    .pagination-container {
      margin-top: 20px;
      text-align: right;
    }
  }
}
</style>
